<template>
  <div id="scan">













    <x-header :left-options="{showBack: false}" @on-click-back="comeback">盘点单 任务中</x-header>
    <x-table :cell-bordered="false" style="background-color:#fff;">
      <thead>
      </thead>
      <tbody>
      <tr style="text-align: center">
        <td><span>
        <router-link to="/home">工号:{{scancodegh}}</router-link></span></td>
        <td><span>卡片数:{{scancodesize}}</span></td>
        <td>
          <!--<span class="btn" >编辑</span>-->
          <span class="btn" @click="checboxshow">批量操作
            <!-- <x-button mini  type="primary"  style="color: #4786ff !important;
             background-color: #fff;
             border-color: #4786ff; border: none"  @click.native="checboxshow">编辑</x-button>-->
          </span>
          <span class="btn" @click="selectAll">全选
            <!-- <x-button mini  type="primary"  style="color: #4786ff !important;
             background-color: #fff;
             border-color: #4786ff; border: none"  @click.native="checboxshow">编辑</x-button>-->
          </span>
        </td>
      </tr>
      </tbody>
    </x-table>
    <checker v-model="demo1" default-item-class="demo1-item" type="checkbox" selected-item-class="demo1-item-selected" @on-change="test">
      <div ref="mybox">
        <div class="chart-wrapper" v-for="(item, index) in  showdata"  >
          <div class="select" v-show="checkshow">
            <!-- <checklist style=" margin-left: 5%; width: 50px; background-color: #1aad19" ref="demoObject"
                        label-position="right" v-model="checklist"
                        :options="objectList" @on-change="change" @click.native="checkeddata=index"></checklist>-->
            <checker-item v-model="index"></checker-item>


          </div>
          <x-table :cell-bordered="false" class="chart1">
            <thead>
            <!-- <tr>
               <td colspan="2">
                 <checklist v-show="checkshow" style="margin-left: 23%" ref="demoObject" label-position="right"
                            :options="objectList" @on-change="change" @click.native="checkeddata=index"></checklist>
               </td>
             </tr>-->

            </thead>
            <tbody>
            <tr>
              <td class="td-left">领用单位名称</td>
              <td class="td-right">{{item.lydwmc}}</td>
            </tr>
            <tr>
              <td class="td-left">仪器编码</td>
              <td class="td-right">{{item.kpbh}}</td>
            </tr>
            <tr>
              <td class="td-left">仪器名称</td>
              <td class="td-right">{{item.yqmc}}</td>
            </tr>
            <tr>
              <td class="td-left">品牌</td>
              <td class="td-right">{{item.pp}}</td>
            </tr>
            <tr>
              <td class="td-left">型号</td>
              <td class="td-right">{{item.xh}}</td>
            </tr>
            <tr>
              <td class="td-left">购置日期</td>
              <td class="td-right">{{item.gzrq}}</td>
            </tr>
            <tr>
              <td class="td-left">保内时间</td>
              <td class="td-right">{{item.gzrq}}</td>
            </tr>
            <tr>
              <td class="td-left">使用人</td>
              <td class="td-right">{{item.syrxm}}</td>
            </tr>
            <tr>
              <td class="td-left">安置地点</td>
              <td class="td-right">
                {{item.azAzdd}}
              </td>
            </tr>
            <tr>
              <td style="position: relative">

                <x-button mini class="btn4" type="primary" @click.native="signaledit(index)" style="font-size: 1em"><span class="icon-site"></span><span class="icon-az">安置地点</span></x-button>
              </td>
              <td style="position: relative">
                <x-button   type="primary" class="btn4 btn4-delete" @click.native="deleterecord(index)"><span class="icon-delete"></span></x-button>
              </td>
              <td></td>
            </tr>
            </tbody>
          </x-table>
        </div>
      </div>

    </checker>
    <br>
    <div v-transfer-dom>
      <confirm v-model="show3" :title="confirmtitle" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-cancel="onCancel" @on-show="onShow" @on-hide="onHide" @on-confirm="onConfirm">
        <p style="text-align:center;">是否撤回安置地点的修改</p>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm v-model="show4" :title="confirmtitle" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-cancel="onCancel" @on-show="onShow" @on-hide="onHide" @on-confirm="onConfirmsubmit">
        <p style="text-align:center;">是否将本次盘点的所有结果提交给资产处</p>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm v-model="show5" :title="confirmtitle" confirm-text="好" theme="ios" cancel-text="再看看"
               @on-cancel="onCancel" @on-show="onShow" @on-hide="onHide" @on-confirm="onConfirmdelete">
        <p style="text-align:center;">是否将该条记录删除</p>
      </confirm>
    </div>





    <tabbar>
      <tabbar-item>

        <span slot="label"> <x-button type="default" class="btn1" :disabled="disableddata"   @click.native="dialog">安置点</x-button></span>
      </tabbar-item>
      <tabbar-item show-dot>

        <span slot="label"> <x-button type="default" class="btn2" :disabled="otherbutton"
                                      @click.native="submit">提交 </x-button></span>
      </tabbar-item>
      <tabbar-item>

        <span slot="label"> <x-button type="default" class="btn3" :disabled="otherbutton"
                                      @click.native="Revocation">撤销 </x-button></span>
      </tabbar-item>

    </tabbar>


    <br>
    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo" :dialog-style="{'max-width': '100%', width: '80%','overflow':'inherit'}">
        <div class="dialog-header"></div>
        <div class="img-box" style="height: 100%;max_width:100%;width: 100%">
          <x-table style="width: 80%;margin-left: auto;margin-right: auto">
            <tbody>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <selector ref="defaultValueRef" title="" :options="yqlist" v-model="yqdata" @on-change="changeyq"
                            v-verify="yqdata" placeholder="请选择一个院区位置"></selector>
                  <label class="tip" v-verified="verifyError.yqdata"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td  style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <selector ref="defaultValueRef" title="" :options="lqlist" v-model="lqdata" v-verify="lqdata"
                            placeholder="请选择一个所在楼的位置"></selector>
                  <label  class="tip" v-verified="verifyError.lqdata"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td  style="position: relative;height: 64px;line-height: 64px">
                <span class="required">*</span>
                <group>
                  <!--  <selector ref="defaultValueRef" title="省份" :options="list" v-model="defaultValue"></selector>-->
                  <x-input title="" v-model.trim="detailwz" placeholder="请输入详细位置" v-verify="detailwz"></x-input>
                  <label class="tip" v-verified="verifyError.detailwz"></label>
                </group>
              </td>
            </tr>
            <tr>
              <td style="position: relative;height: 64px;line-height: 64px">
                <flexbox-item style="margin-top: 10px">
                  <x-button type="primary" class="btn5" style="width: 80%" @click.native="confirm">确认</x-button>
                </flexbox-item>
              </td>
            </tr>
            </tbody>
          </x-table>
        </div>
        <p class="close" >
          <span class="weui-icon-clear" @click="show=false"></span>
        </p>
        <!--<div class="close">
          <span class="weui-icon-clear" @click="show=false"></span>
        </div>-->
      </x-dialog>

    <!--  <p class="close" style="height: 50px;background:dodgerblue">
        <span class="vux-close" @click="show=false"></span>
      </p>-->
    </div>




  </div>
</template>
<script>
  import {XTable, LoadMore, XHeader} from 'vux'
  import {XButton, Box, GroupTitle, Group, Flexbox, FlexboxItem, Divider} from 'vux'
  import {XDialog, TransferDomDirective as TransferDom} from 'vux'
  import {XInput, Cell} from 'vux'
  import {CellBox, Checklist, Selector} from 'vux'
  import _ from 'lodash'
  import {AjaxPlugin} from 'vux'
  import {Confirm, AlertModule, Alert} from 'vux'
  import {Tabbar, TabbarItem} from 'vux'
  import { Checker, CheckerItem, Popup } from 'vux'
  import { CheckIcon } from 'vux'


  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      XTable,
      Flexbox,
      FlexboxItem,
      XDialog,
      XInput,
      Group,
      Cell,
      XHeader,
      CellBox,
      Checklist,
      Selector,
      Confirm,
      Alert,
      Tabbar,
      TabbarItem,
      Checker,
      CheckerItem,
      Popup,
      CheckIcon

    },
    data() {
      return {
        show: false,
        routerdata: '',
        objectList: ['0'],
        checkshow: false,
        checkeddata: '',
        selectedarray: [],
        scangh: '',
        scansize: '',
        showdata: [],
        yqdata: '',
        yqlist: [],
        lqlist: [],
        lqdata: '',
        detailwz: '',
        signaldata: [],
        backshowdata: [],
        show3: false,
        confirmtitle: '提示',
        show4: false,
        scancodegh: '',
        scancodesize: '',
        disableddata: true,
        otherbutton: false,
        scanurl: '',
        checklist:['1'],
        demo1:'',
        testvalue:'',
        lsarray:[],
        qxfalg:false,
        tabArr:[],
        show5:false,
        deleteSerialNo:''


      }

    },
    methods: {

      deleterecord(index){

        this.deleteSerialNo=index
        this.show5=true

      },
      onConfirmdelete(){

        console.log(this.showdata[ this.deleteSerialNo].serialNo)

        AjaxPlugin.$http.post(this.scanurl + '/wd-wechart/Inventory/DelteRecord?SerialNo=' + this.showdata[ this.deleteSerialNo].serialNo)
                .then((data) => {
                  this. InitScandata()

                }).catch(e => {
          // 打印一下错误
          console.log(e)
        })








      },

        comeback(){

            this.$router.replace({path:'/second/id',query:{gh:this.scancodegh,kpbh:'0',size:this. scancodesize}});
        },
      test(val){
        this.selectedarray=val
        if (this.selectedarray.length != 0) {
          this.disableddata = false
        } else {
          this.disableddata = true
        }
      },
      selectAll() {
        if(this.checkshow){
        }else{
          this.checkshow=!this.checkshow

        }

        this.qxfalg=!this.qxfalg
        if( this.qxfalg){
          for(var a=0;a<this.showdata.length;a++){
            this.lsarray.push(a)
          }
          this.demo1=this.lsarray

        }else{

          this.demo1=[]
          this.lsarray=[]
          this.checkshow=!this.checkshow
        }




      },
      checboxshow() {

        this.checkshow = !this.checkshow
      },
      RemoveRepeat(arr){
        var newArr = [];
        for(var i =0;i<arr.length-1;i++){
          if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
          }
        }
        return  newArr
      },
      dialog() {

        this.show =!this.show

        this.yqdata = '',
          this.lqdata = '',
          this.detailwz = ''
        this.selectyq();
      },
      signaledit(index) {

        this.yqdata = '',
          this.lqdata = '',
          this.detailwz = ''
        this.signaldata = []
        this.signaldata.push(index)
        this.show = !this.show
        this.selectyq();
      },
      ClckSyr() {
        for (var i = 0; i < this.selectedarray.length; i++) {
          var j = this.selectedarray[i]
          this.$set(this.showdata[j], 'azYq', 11111)
        }
      },
      removeByValue(arr, val) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            arr.splice(i, 1);
            break;
          }
        }
      },
      change(val, label) {
        if (val.length>0){
          this.selectedarray.push(this.checkeddata)
        } else {
          this.removeByValue(this.selectedarray, this.checkeddata);
        }



      },
      InitScandata() {
        AjaxPlugin.$http.post(this.scanurl + '/wd-wechart/Inventory/QueryCardConfirm?gh=' + this.scancodegh)
          .then((data) => {

            this.scancodegh = data.data.gh;
            this.scancodesize = data.data.size;
            this.showdata = data.data.wxAssetCardConfirms

            this.backshowdata = data.data.wxAssetCardConfirms
            if (data.data.datasize == 0) {
              this.otherbutton = true

            }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },
      selectyq() {
        AjaxPlugin.$http.post(this.scanurl + '/wd-wechart/Inventory/QueryBranch_Type')
          .then((data) => {
            console.log(data)
            this.yqlist = data.data.listyq
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },
      changeyq() {
        if (this.yqdata != '') {
          this.selectlq()

        }

      },
      selectlq() {
        var id = this.yqdata;

        AjaxPlugin.$http.post(this.scanurl + '/wd-wechart/Inventory/QueryBranch?id=' + id)
          .then((data) => {
            console.log(data)
            this.lqlist = data.data.listlq
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })
      },
      confirm() {
this.checkshow=false
        if (this.$verify.check()) {

          if (this.yqdata == '' && this.lqdata == '' && this.detailwz == '') {


          } else {
            var yqname
            var lqname
            for (var a = 0; a < this.yqlist.length; a++) {
              if (this.yqlist[a].key == this.yqdata) {
                yqname = this.yqlist[a].value
              }
            }
            for (var b = 0; b < this.lqlist.length; b++) {
              if (this.lqlist[b].key == this.lqdata) {
                lqname = this.lqlist[b].value
              }
            }
            var azddata = yqname + '' + lqname + '' + this.detailwz


            if (this.signaldata.length != 0) {
              var xb = this.signaldata[0]
              this.$set(this.showdata[xb], 'oldazAzdd', this.showdata[xb].azAzdd)
              this.$set(this.showdata[xb], 'oldazYq', this.showdata[xb].azYq)
              this.$set(this.showdata[xb], 'oldazWzdz', this.showdata[xb].azWzdz)
              this.$set(this.showdata[xb], 'oldazDddress', this.showdata[xb].azDddress)
              this.$set(this.showdata[xb], 'azAzdd', azddata)
              this.$set(this.showdata[xb], 'azYq', yqname)
              this.$set(this.showdata[xb], 'azWzdz', lqname)
              this.$set(this.showdata[xb], 'azDddress', this.detailwz)

            } else {
              for (var i = 0; i < this.selectedarray.length; i++) {
                var j = this.selectedarray[i]

                this.$set(this.showdata[j], 'oldazAzdd', this.showdata[j].azAzdd)
                this.$set(this.showdata[j], 'oldazYq', this.showdata[j].azYq)
                this.$set(this.showdata[j], 'oldazWzdz', this.showdata[j].azWzdz)
                this.$set(this.showdata[j], 'oldazDddress', this.showdata[j].azDddress)
                this.$set(this.showdata[j], 'azAzdd', azddata)
                this.$set(this.showdata[j], 'azYq', yqname)
                this.$set(this.showdata[j], 'azWzdz', lqname)
                this.$set(this.showdata[j], 'azDddress', this.detailwz)

              }
            }
               this.updateAzdd()

          }
          this.show = false
          this.signaldata = []
          this.demo1=[]
          this.lsarray=[]
        }
        for (var i = 0; i < this.showdata.length; i++) {
          if (this.showdata[i].azAzdd != '') {
            this.$refs.mybox.getElementsByTagName('table')[i].getElementsByTagName('td')[16].style.color = '#c7ccd6';
            /*this.$refs.mybox.getElementsByTagName('table')[i].style.border = 'none';*/
          }
        }


      },
      Revocation() {


        this.show3 = true


      },
      onCancel() {

      },
      onConfirm() {
        var idArr=new Array();
        for (var i = 0; i < this.showdata.length; i++) {
          idArr.push(this.showdata[i].serialNo);
          this.$set(this.showdata[i], 'azAzdd', this.showdata[i].oldazAzdd)
          this.$set(this.showdata[i], 'azYq', this.showdata[i].oldazYq)
          this.$set(this.showdata[i], 'azWzdz', this.showdata[i].oldazWzdz)
          this.$set(this.showdata[i], 'azDddress', this.showdata[i].oldazDddress)
        }
        this.$http.post(this.scanurl +'/wd-wechart/Inventory/revoke', idArr)
          .then((data) => {

          }).catch(e => {
          console.log(e)
        })

      },
      onConfirmsubmit() {

        var CardConfirms = JSON.stringify(this.showdata)

        this.$http.post(this.scanurl + '/wd-wechart/Inventory/UpdateConfirmCard', CardConfirms)
          .then((data) => {

            if (data.data.j == 1) {
              this.otherbutton = true
              this.disableddata = true
              this.scancodegh = data.data.gh
              this.InitScandata()

            }
          }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },
      updateAzdd() {

        var CardConfirms = JSON.stringify(this.showdata)

        this.$http.post(this.scanurl + '/wd-wechart/Inventory/updateAzdd', CardConfirms)
                .then((data) => {

                  if (data.data.j == 1) {
                    this.InitScandata()
                  }
                }).catch(e => {
          // 打印一下错误
          console.log(e)
        })


      },
      onHide() {

      },
      onShow() {

      },
      submit() {
        this.tabArr=new Array();
        for (var i = 0; i < this.showdata.length; i++) {
          if (this.showdata[i].azAzdd == '') {
            this.tabArr.push(i);
          }
          if(i==this.showdata.length-1){
            this.showModuleAuto();
          }
        }

        /*  this.showalert=!this.showalert*/
      },
      showModule() {

      },
      showModuleAuto() {
        if(this.tabArr.length>0){
          for(var i=0;i<this.tabArr.length;i++){
            var num=this.tabArr[i];
            /* alert(this.$refs.mybox.getElementsByTagName('table')[num].getElementsByTagName('td')[16]);*/
            this.$refs.mybox.getElementsByTagName('table')[num].getElementsByTagName('td')[16].style.color = '#f40';
            /* this.$refs.mybox.getElementsByTagName('table')[num].style.border = '2px solid #f40';*/
            /* this.$refs.mybox.getElementsByTagName('table')[num].style.backgroundColor = '#f40';*/
          }
          AlertModule.show({
            title: '',
            content: '请维护卡片安置地点',
            onShow() {
            },
            onHide() {

            }
          })
          setTimeout(() => {
            AlertModule.hide()
          }, 5000)
        }else{
          this.show4 = true;
        }
      },
    },

    mounted() {
      this.scancodegh = this.$route.query.gh

      this.InitScandata()
    },
    verify: {

      detailwz: "required",
      yqdata: "required",
      lqdata: "required"

    },
    computed: {
      verifyError: function () {
        return this.$verify.$errors;
      }
    }
  }
</script>

<style lang="less"  >
  @import '~vux/src/styles/close';
  @import '~vux/src/styles/1px.less';

.flex-demo {
    text-align: center;
    color: #fff;
    background-color: #20b907;
    border-radius: 4px;
    background-clip: padding-box;
  }

  .btn {
    padding: 5px 10px;
    color: #4786ff !important;
    background-color: #fff;
    border: 1px solid #4786ff;
    border-radius: 50px
  }

  .chart-wrapper {
    margin-top: 25px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .select {
    width: 50px;
    margin-right: 10px;

  }

  .chart1 {
    /*flex:1;*/
    /* position: relative;
     left:70px;*/
    width: 90% !important;
    margin: 0px auto !important;
    background-color: #fff !important;
    border-radius: 10px !important;
  }

  .td-left {
    width: 40%;
    text-align: left;
    color: #c7ccd6;
    padding-left: 10px
  }

  .td-right {
    width: 60%;
    text-align: right;
    color: #343f51;
    padding-right: 10px
  }

  .required {
    position: absolute;
    left: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }
   .tip{
    position: absolute;
    right: -15px;
    top: 50%;
    font-size: 13px;
    color: red;
    transform: translate(0, -50%);
  }
   .weui-cells {
    overflow: inherit!important;
  }
   .weui-cell {

    border-width: 0 !important;
    background-color: #fafafa !important;
  }

   .weui-cells:before {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

   .weui-cells:after {
    border-width: 0 !important;
    background-color: #fafafa !important;
  }

 .btn1 {
    color: #fff !important;
    background: #4786ff !important;
    border-radius: 0 !important;
    border-width: 0 !important
  }

 .btn1:after {

    border-radius: 0 !important;
    border-width: 0 !important
  }

 .btn2 {
    color: #fff !important;
    background: #7aa9ff !important;
    border-radius: 0 !important;
    border-width: 0 !important
  }

  .btn2:after {
    border-radius: 0 !important;
    border-width: 0 !important
  }

 .btn3 {
    color: #fff !important;
    background: #a5b0c8 !important;
    border-radius: 0 !important;
    border-width: 0 !important
  }

.btn3:after {
    border-radius: 0 !important;
    border-width: 0 !important
  }

.btn4 {
    width: 100%!important;
    height: 35px!important;
    text-align: center!important;
    text-indent: 13px;
    padding-left:16px!important;
    margin-left: 10px !important;
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
  }

  .btn4-delete {
    width: 40%!important;
    margin-left: 20px !important;
   /* height: 35px!important;
    text-align: right!important;
    padding-left: 16px!important;
    margin-left: 10px !important;
    color: #4786ff !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;*/
    /*width: 40%!important;
    height: 35px!important;
    text-align: center!important;
    margin-left: 20px !important;
    background-color: #f7f7f7 !important;
    border-radius: 50px !important;
    border: none;*/
    /*padding-left: 16px!important;*/
  /*  color: #4786ff !important;*/

  }




.btn4:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }
.btn5 {
    margin-left: 10px !important;
    color: #fff !important;
    background-color: #4786ff !important;
    border-radius: 50px !important;
  }

.btn5:after {
    margin-left: 10px !important;
    border-width: 0 !important;
    border-radius: 50px !important;
  }
#scan .icon-site {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translate(0,-50%);
    z-index: 1;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/site.png") no-repeat !important;
    background-position: center;
    background-size: cover;
  }


  #scan .icon-delete {
    /*position: relative;*/
    display: block;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/delete.png") no-repeat center;
    margin: 0px auto;
    /*display: block;*/

    /*top: 60%;*/
   /* left: 20px;*/
   /* transform: translate(0,-50%);*/
   /* position: absolute;
    z-index: 1;
    width: 32px !important;
    height: 32px !important;
    background: url("./assets/delete.png") no-repeat center;
    line-height: 32px;*/
   /* background-position: center;*/
   /* background-size: cover;*/

  }


.dialog-header {
    width: 100%;
    height: 35px;
    background: url("./assets/ic_person@2x.png") no-repeat;
    background-position: right;
    background-size: contain;

    background-color: #4786ff;
  }

.weui-cells {
    margin-top: 0 !important;
  }

.dialog-title {
    line-height: 30px;
    color: #666;
  }

.img-box {
    height: 350px;
    width: 300px;
    overflow: hidden;
  }
.close{
   position:absolute;
    left: 0%;
    right: 0%;
      bottom: -50px;
    z-index: 10;
    text-align: center;
    font-size: 32px;
  }
.close .weui-icon-clear{
    font-size: 32px;
    color:#fff ;
    opacity: 0.6;
  }
 .vux-close {
    margin-left: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
    color: red;
  }
  .demo1-item {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    margin-left: 10px;
  }
  .demo1-item-selected {
    /*border-color: green;*/
    background: #4786ff;
  }

</style>
